<script setup lang="ts">
// const option = {
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'shadow',
//     },
//   },
//   grid: {
//     left: '3%',
//     right: '4%',
//     bottom: '3%',
//     containLabel: true,
//   },
//   xAxis: [
//     {
//       type: 'category',
//       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//       axisTick: {
//         alignWithLabel: true,
//       },
//     },
//   ],
//   yAxis: [
//     {
//       type: 'value',
//       splitLine: {
//         show: true,
//         lineStyle: {
//           type: 'dashed',
//           color: '#666',
//         },
//       },
//     },

//   ],
//   series: [
//     {
//       name: 'Direct',
//       type: 'bar',
//       barWidth: '60%',
//       data: [200, 390, 100, 200, 390, 300, 220],
//     },
//   ],
// };

const option = {
  color: 'transparent',
  xAxis: {
    type: 'category',
    axisLabel: {
      color: '#666',
      fontSize: 8,
      rotate: 45,
    },
    data: ['类型一', '类型二', '类型三', '类型四', '类型五', '类型六', '类型七', '类型八', '类型九', '类型十'],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
    axisLable: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    min: 10,
    axisLabel: {
      color: '#999',
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#666',
      },
    },
    axisLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  series: [
    {
      data: [28, 20, 18, 16, 20, 16, 20, 26, 38, 20],
      type: 'bar',
      showBackground: true,
      barWidth: 10,
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
          offset: 1, color: '#267dde', // 0% 处的颜色
        }, {
          offset: 0, color: '#30d7e9', // 100% 处的颜色
        }],
      },
      label: {
        offset: [-30, 40],
      },
      itemStyle: {
        borderRadius: 0,
      },
    },
  ],
};
</script>

<template>
  <v-chart
    class="chart"
    :option="option"
  />
</template>

<style scope>
.chart {
  width: 260px;
  height: 260px;
}
</style>
